<template>
  <div id="Home">
    <div id="main" :style="{ backgroundImage: `url(${backgroundimg})` }">
      <!-- 导航栏 -->
      <TopNavBar
        :leftIcon="leftIcon"
        :rightIcon="rightIcon"
        :leftClick="leftClick"
        :rightClick="rigthClick"
      />
      <!-- 主页欢迎语 -->
      <transition name="title-show">
        <div id="homeTitle" v-show="showTitle">
          <div>
            <span>Welcome to our website<br/>
            -Zyq & Pxq-</span>
          </div>
        </div>
      </transition>
      <div class="down" v-show="showTitle">
        <div class="button">
          <a href="javascript:void(0)" @click="goAnchor('#buttonshare')">CONTACT US</a>
        </div>
        <div class="arrowdown">
          <van-icon name="arrow-down" size="50" />
        </div>
      </div>
      
      <!-- 遮罩层，其中内容用于跳转页面 -->
      <div>
        <van-overlay :show="showList" @click="showListClick1">
          <div id="list">
              <div
                v-for="(items, index) in myList"
                :key="index"
                @click="pageto(items.path)"
              >
                {{ items.name }}
              </div>
          </div>
        </van-overlay>
      </div>
      <!-- logo介绍面板 -->
      <div>
        <van-overlay :show="showShare" @click="showListClick2" :custom-style="{background:'rgba(225, 225, 225,0.6)'}">
          <div class="shareus">
            <div class="webtitle">
              <span>{{contentlist.title}}</span>
            </div>
            <div class="content">
              <div v-for="(item, index) in contentlist.content" :key="index">
                <h2 style="font-family:宋体 ;">{{item.title}}</h2>
                <span v-html="item.value"></span><br/>
                <van-image
                  lazy-load 
                  fit="cover"
                  radius="60px"
                  width="300px"
                  height="400px"
                  :src="require('@/assets/album_sharelist/' + item.img)"
                />
              </div>
            </div>
          </div>
        </van-overlay>
      </div>
    </div>
    <!-- 底部站外链接 -->
    <div id="buttonshare">
      <BottomShare />
    </div>
    
  </div>
</template>

<script>
import TopNavBar from "@/components/TopNavBar.vue";
import BottomShare from "@/components/BottomShare.vue";

export default {
  name: "Home",
  components: {
    TopNavBar,
    BottomShare,
  },
  data() {
    return {
      rightIcon: "wap-nav",
      leftIcon: require("@/assets/logo.png"),
      topLeftClick: this.topLeftClick,
      topRigthClick: this.topRigthClick,
      backgroundimg: require("@/assets/xc4.jpg"),
      contentlist: [],
      showShare: false,//分享页面
      showList: false,//列表页面
      showTitle: false,//主页页面
      myList: [
        { name: "About us", path: "/aboutme" },
        { name: "Blog", path: "/blog" },
        { name: "Album", path: "/album" },
        { name: "Message", path: "/board" },
      ],
    };
  },
  created() {
     // 获取本地数据（图片地址）
     this.axios.get("/data/share.json").then((res) => {
      this.contentlist = res.data;
      // console.log(contentlist);
    });
    setTimeout((this.showTitle = true), 2000);
  },
  methods: {
    leftClick() {
      console.log("home-left"); //测试左点击效果
      this.showShare = true; //显示分享页面
      this.showTitle = false; //隐藏欢迎标语
    },
    rigthClick() {
      console.log("home-right"); //测试右点击效果
      this.showTitle = false; //隐藏欢迎标语
      this.showList = true; //显示页面导航遮罩层
    },
    //关闭分享页面，跳转至对应网页
    onSelect(option) {
      this.showShare = false;
      window.location.href = option.href;
    },
    //点击遮罩层页面导航，跳转至对应页面
    pageto(path) {
      console.log("前往页面："+path)
      this.$router.push({ path: path });
    },

    //点击导航遮罩层其他区域，隐藏导航，显示主页
    showListClick2() {//左侧遮罩层
      this.showShare = false;
      this.showTitle = true;
    },
    showListClick1() {//右侧遮罩层
      this.showList = false;
      this.showTitle = true;
    },

    //模拟锚点定位
    goAnchor(selector){
      document.querySelector(selector).scrollIntoView({
        behavior:"smooth"
      })
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  position: relative;
  height: 105vh;
  background-size: 100% 100%;
  /* color: rgba(rgb(235, 218, 218), green, blue, alpha); */
}
#list {
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: white;
  font-size: 25px;
  font-family: STLiti;
  align-items: center;
  /* justify-content: center; */
}
#list div{
  cursor: pointer;
  margin: 10px;
}
#list div:hover{
  color: rgb(146, 209, 250);
}
#homeTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 3px 3px 1px rgb(48, 57, 73);
  font-family: STLiti;
  color: rgb(231, 229, 229);
  text-align: center;
}
.title-show-enter-active {
  transition: opacity 4s;
}
.title-show-leave-active {
  transition: opacity 0.5s;
}
.title-show-enter,
.title-show-leave-to {
  opacity: 0;
}
.button{
  background: transparent;
  border-radius: 1px;
  border: 0.5px solid white;
  padding: 3px 5px;
}
.button:hover{
  background-color: aliceblue;
  color: black;
}
a{
  color: white;
}
a:hover{
  color: black;
}
.down{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
.shareus{
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.webtitle{
  margin-top: 20px;
  color: rgb(5, 5, 5);
  font-size: 20px;
  font-family: STLiti;
}
.content{
  text-align: center;
  font-size: large;
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
}
.van-image{
  margin:0px 10px 0px 10px;
}
#img-box {
  column-count: 3;
  column-gap: 15px;
}
</style>